<template>
  <div>
    <Header :currentCity="currentCity" :cityList="cityList" :params="loginType" @closeChange="save"></Header>
    <div class="content-row">
      <div class="ask-banner">
        <Crumb :crumbListData="crumbListData"></Crumb>
        <div class="search-row">
          <div class="search-notice">帮助21556位用户，解决856055个购房问题</div>
          <div class="search-form">
            <div class="search-left">
              <form method="post" :action="searchAction">
                <input
                  type="text"
                  class="ipt"
                  :value="qaName"
                  @input="searchChange"
                  autocomplete="off"
                  placeholder="搜你想要的问题、答案"
                />
                <button type="submit" class="btn-search el-icon-search"></button>
              </form>
            </div>
            <div class="search-right">
              <a
                href="javascript: void(0)"
                @click="
                  loginType = 'problem';
                  popupproblem.show = true;
                "
                class="btn-add-fill"
              >我要提问</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ask-content">
        <div class="ask-content-center">
          <div class="ask-label-tab">
            <ul class="label-tab-ul">
              <li
                v-for="(item, index) in labsData"
                :key="index"
                :class="labsChecked == item.aliases ? 'on' : ''"
              >
                <a :href="`${prefixUrl}/nwwd/${item.aliases}`">
                  {{
                  item.name
                  }}
                </a>
              </li>
            </ul>
          </div>
          <div class="ask-label-content">
            <ul class="label-content-ul">
              <li v-for="(item, index) in listData" :key="index">
                <h2>
                  <a
                    :href="`${prefixUrl}/nwwdxq/${item.id}.html`"
                    target="_blank"
                  >{{ item.content }}</a>
                </h2>
                <div class="author-row">
                  <div class="author-left">
                    <el-image
                      class="avatar"
                      :src="item.aUserImg || 'https://v2static.cdn.pulizu.com/defaultAvatar.png'"
                      :alt="item.userName"
                      fit="cover"
                      lazy
                    ></el-image>
                    {{ item.zzName ? `${item.zzName}:` : "热心网友:" }}
                    {{ item.aUserName || "✖✖✖✖✖✖✖✖✖✖用户" }} 的回答
                  </div>
                  <div class="author-right">
                    <div class="labels" v-for="(ite, ind) in item.labsArr" :key="ind">
                      <a :href="`${prefixUrl}/nwwdxq/${item.id}.html`">
                        {{
                        ite
                        }}
                      </a>
                    </div>
                  </div>
                </div>
                <div class="problem-content">
                  <div class="problem-item">
                    <div class="answer">
                      <a :href="`${prefixUrl}/nwwdxq/${item.id}.html`">
                        {{
                        item.aContent
                        }}
                      </a>
                      <span>{{ item.aNum || 0 }}个答案·{{ item.cNum || 0 }}赞</span>
                    </div>
                    <ul class="relevant" v-show="item.estateId">
                      <li>
                        <a
                          :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                          target="_blank"
                          class="relevant-a"
                        >
                          <span class="name">{{ item.houseName }}</span>
                          <span class="r-line"></span>
                          <span class="address">{{ item.cityName }}</span>
                          <span class="r-line"></span>
                          <span class="price">
                            {{
                            item.meterPrice ? `${item.meterPrice}元/m²` : "待定"
                            }}
                          </span>
                          <span class="link">查看详情</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="problem-more">
                  <a :href="`${prefixUrl}/nwwdxq/${item.id}.html`">查看全部答案>></a>
                </div>
              </li>
            </ul>
          </div>
          <!-- 空数据 -->
          <el-empty description="暂无数据" v-if="empty"></el-empty>
          <div class="info-more">
            <el-button
              class="info-more-a"
              :disabled="moreDisabled"
              v-show="!empty"
              @click="moreBtn"
            >{{ moreText }}</el-button>
          </div>
          <!-- 关键区域，街道，周边 -->
          <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 提交问题 -->
    <PopupProblem
      :show="popupproblem.show"
      :title="popupproblem.title"
      :textareaValue="popupproblem.textareaValue"
      :placeholder="popupproblem.placeholder"
      :confirmText="popupproblem.confirmText"
      :disabled="popupproblem.disabled"
      @close="popupproblem.show = false"
      @confirm="popupproblemConfirm"
    ></PopupProblem>
    <!-- 弹窗 -->
    <PopupProblemSuccess
      :show="popup.show"
      :cover="popup.cover"
      :title="popup.title"
      :desc="popup.desc"
      :confirmText="popup.confirmText"
      @confirm="
        popup.show = false;
        popupproblem.disabled = false;
      "
    ></PopupProblemSuccess>
  </div>
</template>

<script>
var head = {
  title: '',
  content: '',
  keywords: '',
}
import u from '@/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
    }
  },
  data() {
    return {
      loginType: '',
      popupproblem: {
        show: false,
        title: '有问必答',
        textareaValue: '',
        placeholder: '在这里输入您的问题（必填）',
        confirmText: '立即提问',
        disabled: false,
      },
      textareaValue: '',
      popup: {
        show: false,
        cover:
          'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20210907/8b2e500aa48e4a29abbc68cd53059a7f.png',
        title: '提交成功',
        desc: '您的问题已提交后台审核',
        confirmText: '确认',
      },
      moreDisabled: false,
      moreText: '加载更多',
    }
  },
  validate(ctx) {
    return !ctx.params.id ? true : /^[a-zA-Z]+?$/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var prefixUrl = ctx.prefixUrl
    var cityCode = ctx.cityCode
    var crumbListData = []
    var labsChecked = ctx.params.id || '' // 拆分"-"获取第一个做列表类型或标签判断
    var pageNum = 1 // 拆分"p"获取第二个参数作为分页
    var pageSize = 10
    var qaName = ctx.query.query || ''
    var listData = []
    var labsData = [
      { aliases: '', name: '全部', content: '' },
      { aliases: 'lpzx', name: '楼盘资询', content: '' },
    ]
    var labsIndex = 0
    var empty = false
    var total = 1
    var searchAction = qaName ? `?query=${qaName}` : ''
    // 修改SEO
    head.title = `${currentCity.cityName}房产问答_${currentCity.cityName}购房知识_${currentCity.cityName}楼盘问题解答-${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖问答频道`
    head.keywords = `${currentCity.cityName}房产问答，${currentCity.cityName}购房知识，${currentCity.cityName}楼盘问题解答，${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖问答频道`
    head.content = `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖问答频道，为您提供${currentCity.cityName}【买房资质，贷款交易，楼盘咨询，政策解读，房价行情，购房建议，纠纷维权，流程材料】相关房产问题解读，轻松解决您的一切关于${currentCity.cityName}购房、买房问题，解答${currentCity.cityName}各类房产问题，就来${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖！`
    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: `${currentCity.cityName}你问我答`,
        href: prefixUrl + ctx.route.path,
      },
    ]
    // 获取标签列表
    var getLabsData = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 423,
      },
    })
    if (getLabsData.code == 200) {
      getLabsData.data.forEach((item, index) => {
        labsData.push(item)
      })
    }
    // 获取列表
    labsData.forEach((item, index) => {
      if (labsChecked == item.aliases) {
        labsIndex = index
      }
    })
    let labs =
      labsChecked == '' && labsChecked == 'lpzx'
        ? ''
        : labsData[labsIndex].content
    let type = labsChecked == '' ? '' : labsChecked == 'lpzx' ? 1 : 2
    var getListData = await u.http({
      url: '/app/houseInfoQa/queryHouseQaList',
      params: {
        pageNum,
        pageSize,
        labs,
        type, // 1代表楼盘2代表楼市
        estateId: '',
        qaName,
        cityCode,
      },
    })
    if (getListData.code == 200) {
      getListData.data.list.forEach((item) => {
        item.labsArr = item.labs ? item.labs.split(',') : []
      })
      total = Math.ceil(getListData.data.total / pageSize)
      listData = getListData.data.list
      if (getListData.data.list.length < 1) {
        empty = true
      }
    } else {
      empty = true
    }

    return {
      currentCity,
      cityList,
      prefixUrl,
      cityCode,
      crumbListData,
      pageNum,
      pageSize,
      qaName,
      listData,
      labsData,
      labsIndex,
      labsChecked,
      empty,
      total,
      searchAction,
      regionList: ctx.regionList
    }
  },
  methods: {
    // 监听搜索框
    searchChange(e) {
      this.qaName = e.target.value
      this.searchAction = `${this.prefixUrl}/nwwd/${this.labsChecked}?query=${e.target.value}`
    },
    // 加载更多按钮
    moreBtn() {
      if (this.pageNum >= this.total) {
        this.moreText = '没有数据了'
        return false
      }
      this.pageNum++
      this.getListData()
    },
    getListData() {
      this.moreDisabled = true
      let labs =
        this.labsChecked == '' && this.labsChecked == 'lpzx'
          ? ''
          : this.labsData[this.labsIndex].content
      let type =
        this.labsChecked == '' ? '' : this.labsChecked == 'lpzx' ? 1 : 2
      u.http({
        client: true,
        url: '/app/houseInfoQa/queryHouseQaList',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          labs,
          type, // 1代表楼盘2代表楼市
          estateId: '',
          qaName: this.qaName,
          cityCode: this.cityCode,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            item.labsArr = item.labs ? item.labs.split(',') : []
          })
          this.listData = [...this.listData, ...res.data.list]
          setTimeout((e) => {
            this.moreDisabled = false
          }, 300)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
      setTimeout((e) => {
        this.moreDisabled = false
      }, 300)
    },
    // 立即提问
    popupproblemConfirm(e) {
      this.textareaValue = e
      var nowE = e.replace(new RegExp(/\s/, 'g'), '')
      if (nowE == '') {
        this.$message({
          message: '请输入您的问题内容',
          type: 'warning',
        })
        return false
      }
      if (!localStorage.getItem('userInfo')) {
        setTimeout((e) => {
          document.querySelector('#login').click()
        }, 300)
        return false
      }
      this.save()
    },
    // 提交信息
    save() {
      this.popupproblem.disabled = true
      this.popupproblem.show = false
      u.http({
        client: true,
        url: '/app/houseInfoQa/addHouseInfoQa',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          type: 2,
          estateId: '',
          content: this.textareaValue,
          cityCode: this.cityCode,
        },
      }).then((res) => {
        this.popupproblem.textareaValue = ''
        if (res.code == 200) {
          setTimeout((e) => {
            this.popup.show = true
          }, 300)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
    },
  },
}
</script>